<template>
    <highcharts :options="chartOptions"></highcharts>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { get_echarts } from "../api/ecgartsAPI";

const cookie = ref([]);
const chartOptions = ref({});

onMounted(async () => {
    if (!localStorage.getItem("zwj2")) {
        const res = await get_echarts("host_money_month", "HostMoneyMonth", 5);
        localStorage.setItem("zwj2", JSON.stringify(res.data));
    }
    cookie.value = JSON.parse(localStorage.getItem("zwj2"));
    const data = cookie.value.map((item) => [item.host_name, item.money]);
    
    chartOptions.value = {
        chart: {
            type: "column",
        },
        title: {
            text: "每月房东收入前5",
        },
        xAxis: {
            type: "category",
        },
        yAxis: {
            min: 0,
            title: {
                text: "收入",
            },
        },
        legend: {
            enabled: false,
        },
        series: [
            {
                name: "房东收入",
                data: data,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: "#FFFFFF",
                    align: "right",
                    format: "{point.y}", // :.1f 为保留 1 位小数
                    y: 10,
                },
            },
        ],
    };
});
</script>

<style scoped></style>
